<template>
  <div>
    <!-- 子路由header -->
    <header class="flex-center-between">
      <div class="l_title">
        <a-button @click="addAllowances" class="btn_bag" icon="plus"> 添加津贴 </a-button>
      </div>
      <!--  <a-button>保存</a-button> -->
    </header>
    <!-- 子路由插座 -->
    <a-layout-content class="a_layout_content">
      <div @click="editorDetail(i)" v-for="(item, i) in data" :key="i">
        <a-row type="flex" align="middle" class="a_title">
          <a-col :span="6" style="color: rgba(37, 37, 37, 1); font-weight: 600">{{ item.name }}</a-col>
          <a-col :span="8">
            <a-row class="sub_tit pb12">津贴名称</a-row>
            <a-tag color="#6A66F6">{{ item.subsidyInfoDOList[0].name }}</a-tag>
          </a-col>
          <a-col :span="8">
            <a-row class="sub_tit pb12">备注</a-row>
            <a-row>{{ item.remark }}</a-row>
          </a-col>
          <a-col :span="2" class="ta-right">
            <a-popconfirm placement="leftBottom" title="确定删除该记录？" @confirm="del(item.id)" okText="确认" cancelText="取消">
              <a-icon @click.stop style="font-size: 20px" type="delete" />
            </a-popconfirm>
          </a-col>
        </a-row>
      </div>
    </a-layout-content>
    <add-allowance :allOptions="addOptions" @cbFun="cbFun($event)"></add-allowance>
  </div>
</template>

<script>
import { Wages, WagesSet } from "@/api/wages/index";
export default {
  name: "AllowanceSet",
  components: {
    addAllowance: () => import("@/views/wages/common/add_allowance")
  },
  inject: ["reload"],

  data() {
    return {
      data: [],
      addOptions: {},
      obj: {
        applyToProgAddDTO: {
          applyToProgDepAddDTOList: [], // 适用部门
          applyToProgLevelAddDTOList: [], // 适用职级
          applyToProgPositionAddDTOList: [], // 适用岗位
          busProgId: "", // 业务方案ID
          busProgType: "", // 业务方案类型
          employRange: 1, // 适用范围（1：按部门，2：按职级，3：按岗位）
          mutex: false // 是否和其余部门员工互斥
        },
        attendanceRange: true, // 适用出勤范围
        attendanceRangeDays: 1, // 出勤天数
        name: "", // 方案名称
        remark: "", // 备注
        subsidyInfoDOList: [
          {
            amount: 0, // 津贴金额
            createUserId: "",
            gmtCreate: "", // 创建日期
            gmtModified: "", // 修改日期
            id: "", // 主键id,
            modifiedUserId: "string",
            name: "", // 津贴名称
            progId: "", // 津贴方案id
            siteId: "",
            type: 1, // 津贴类型1 每日出勤2每计薪日3每月固定4(每月按出勤日)5(每月按计薪日)
            valid: null
          }
        ],
        taxMethod: 1 // 计税方式 1 税前2税后
      }
    };
  },
  created() {
    /* 获取津贴列表 */
    this.getallowanceList();
  },

  methods: {
    cbFun(e) {
      if (e) {
        this.reload();
      }
    },
    /* 添加津贴方案 */
    addAllowances() {
      this.addOptions = {
        show: true,
        obj: {
          editorId: null
        }
      };
    },
    /* 获取津贴列表 */
    getallowanceList() {
      Wages({
        url: WagesSet.allowance,
        params: { companyId: this.$store.state.hr.companyId }
      }).then(({ data }) => {
        this.data = data;
      });
    },
    /* 修改津贴方案 */
    editorDetail(i) {
      const copyData = JSON.parse(JSON.stringify(this.data[i]));
      copyData.subsidyInfoDOList.forEach((item) => {
        item.amount /= 100;
      });
      this.addOptions = {
        show: true,
        init: this.reload,
        id: this.data[i].id,
        obj: {
          editorId: this.data[i].id
        }
      };
    },
    /* 删除津贴方案 */
    del(id) {
      Wages({
        url: WagesSet.delAllowance + id,
        method: "DELETE"
      }).then((data) => {
        if (data.success) this.reload();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.a_layout_content {
  background: #fff;
  min-height: calc(100vh - 190px);
  .a_title {
    height: 80px;
  }
}
</style>
